<div class="profile-content">
    <div class="unwrap">
        <div class="bg-cover" style="background-image: url(assets/img/profile/profile-bg.jpg);">
            <div class="p-4 text-center text-white">
                <img *ngIf="user?.picture" class="img-avatar rounded-circle thumb128" [src]="user?.picture" alt="user?.name" />
                <img *ngIf="!user?.picture" class="img-avatar rounded-circle thumb128" src="/assets/img/dummy.png" alt="user?.name" />
                <h3 class="m-0">{{user?.name}}</h3>
                <p>{{user?.jobTitle}} - {{user?.url}}</p>
                <p>{{user?.bio}}</p>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-5">
            <div class="card b">
                <div class="card-header bg-primary text-bold">{{ 'user.account.TITLE' | translate }}</div>
                <div class="card-body">
                    <div *ngIf="errors.length > 0">
                        <alert type="danger">
                            <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
                        </alert>
                    </div>
                    <div *ngIf="hasPassword">
                        <div class="form-group">
                            <label>{{ 'user.account.CURRENT-PASSWORD' | translate }}</label>
                            <input class="form-control" type="password" autocomplete="current-password" [(ngModel)]="changePass.oldPassword" />
                        </div>
                        <div class="form-group">
                            <label>{{ 'user.account.NEW-PASSWORD' | translate }}</label>
                            <input class="form-control" type="password" autocomplete="new-password" [(ngModel)]="changePass.newPassword" />
                        </div>
                        <div class="form-group">
                            <label>{{ 'user.account.CONFIRM-PASSWORD' | translate }}</label>
                            <input class="form-control" type="password" autocomplete="new-password" [(ngModel)]="changePass.confirmPassword" />
                        </div>
                        <button class="btn btn-primary" type="button" (click)="changePassword()" *ngIf="!changingPassword">{{ 'user.account.UPDATE-PASSWORD' | translate }}
                        </button>
                        <div class="progress mb-3" *ngIf="changingPassword">
                            <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div *ngIf="!hasPassword">

                        <div class="form-group">
                            <label>{{ 'user.account.NEW-PASSWORD' | translate }}</label>
                            <input class="form-control" type="password" autocomplete="new-password" [(ngModel)]="setPassword.newPassword" />
                        </div>
                        <div class="form-group">
                            <label>{{ 'user.account.CONFIRM-PASSWORD' | translate }}</label>
                            <input class="form-control" type="password" autocomplete="new-password" [(ngModel)]="setPassword.confirmPassword" />
                        </div>
                        <button class="btn btn-primary" type="button" (click)="createPassword()" *ngIf="!changingPassword">{{ 'user.account.CREATE-PASSWORD' | translate }}
                        </button>
                        <div class="progress mb-3" *ngIf="changingPassword">
                            <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-md-5">
            <div class="card b">
                <div class="card-header bg-danger text-bold">{{ 'user.account.DELETE-ACCOUNT' | translate }}</div>
                <div class="card-body bt">
                    <p>{{ 'user.account.DELETE-CONFIRMATION' | translate }}</p>
                    <button type="button" class="btn btn-danger" data-toggle="modal" (click)="dangerModal.show()">
                        {{ 'user.account.DELETE-ACCOUNT' | translate }}
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-danger" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ 'user.account.REMOVE-ACCOUNT' | translate }}</h4>
                <button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>{{ 'user.account.ARE-YOU-SURE' | translate }}&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">{{ 'general.NO' | translate }}</button>
                <button type="button" class="btn btn-danger" (click)="removeAccount()">{{ 'general.YES' | translate }}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->